<!DOCTYPE html>
<html>
    <head>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: darkorchid;
                padding: 20px;
            }

            .grid-container > div {
                background-color:rgb(233, 212, 245) ;
                font-size: 40px;
                text-align: center;
                padding: 0px;
            }

            .item1 {
                grid-area: 1 / 2 / 4 / 5;
            }

            .grid-container2 {
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: max-content;
                grid-gap: 10px;
                background-color:plum;
                padding: 20px;
            }

        </style>
    </head>

    <body>
        <div class="grid-container">
            <div>导航</div>
            <div>栏一</div>
            <div class="item1">使用网格布局搭建</div>
            <div class="item2">栏二</div>
            <div class="item3">栏三</div>  
            <div class="item4">章一</div>
            <div class="item5">章二</div>
            <div class="item5">章三</div>
        </div>

        <div class="grid-container2">
            <p>1.</p>
            <p>2.</p>
            <p>3.</p>
            <p>4.</p>
            <p>5.</p>
            <p>6.</p>
        </div>
    </body>
</html>